<template>
  <div
    style="
      border-radius: 5px;
      width: 98%;
      height: 600px;
      background: white;
      margin-top: 10px;
      margin-left: 18%;
    "
  >
    <div class="handle-box" style="margin-left: 1%; padding: 20px">
      <el-button class="modify" @click="handleDelete(oid)"
        ><Delete style="width: 1em; height: 1em; margin-right: 8px" /> 删除</el-button
      >
      <el-input
        style="margin-left: 20%"
        v-model="selectWord"
        size="medium"
        placeholder="用户名/电影名"
        class="handle-input"
      ></el-input>
      <el-button class="modify" @click="selectOrders">点击查询</el-button>
    </div>
    <el-table
      size="mini"
      style="margin-left: 8%; margin-top: 5px; width: 80%; height: 400%"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="mname" label="电影" align="center"></el-table-column>
      <el-table-column prop="cname" label="影厅" align="center"></el-table-column>
      <el-table-column prop="orow" label="行数" align="center"></el-table-column>
      <el-table-column prop="ocolumn" label="列数" align="center"></el-table-column>
      <el-table-column prop="playTime" label="放映时间" align="center" sortable></el-table-column>
      <el-table-column prop="price" label="价格" align="center"></el-table-column>
      <el-table-column
        prop="ostate"
        label="状态"
        :filters="[
          { text: '已过期', value: '已过期' },
          { text: '未过期', value: '未过期' }
        ]"
        :filter-method="filterState"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.ostate === '已过期' ? 'warning' : 'success'"
            disable-transitions
            >{{ scope.row.ostate }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="删除电影" v-model="delDialogVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span>
        <el-button size="mini" @click="delDialogVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteOrders">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const tempData = ref([])
const pageSize = ref(5)
const selectWord = ref('')
const tableData = ref([])
function getOrdersData() {
  // 使用axios通信获得后端的订单数据
  axios
    .get('/api//order//getAllOrder')
    .then((res) => {
      tableData.value = res.data
      tempData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取订单信息失败！')
    })
}

onMounted(() => {
  getOrdersData()
})
const oid = ref('')

const currentPage = ref(1)
function handleCurrentChange(val) {
  currentPage.value = val
}

const data = computed(() => {
  return tableData.value.slice((currentPage.value - 1) * pageSize.value)
})

// 选择订单
function selectOrders() {
  if (selectWord.value === '') {
    tableData.value = tempData.value
  } else {
    tableData.value = []
    for (const item of tempData.value) {
      if (item.mname.includes(selectWord.value) || item.username.includes(selectWord.value)) {
        tableData.value.push(item)
      }
    }
  }
}

const idx = ref('')
function deleteRow() {
  axios
    .get('/api/order/deleteOrder' + '/' + idx.value)
    .then((res) => {
      ElMessage.success('删除成功！')
      console.log(res)
      getOrdersData()
    })
    .catch(() => {
      ElMessage.warning('删除失败！')
    })
}

const delDialogVisible = ref(false)
// 弹出删除窗口，并将要删除这行的id绑定到idx上
function handleDelete(id) {
  idx.value = id
  delDialogVisible.value = true
}

// 多选
const multipleSelection = ref('')
function handleSelectionChange(val) {
  multipleSelection.value = val
}

// 删除多选的订单
function deleteOrders() {
  for (const item of multipleSelection.value) {
    handleDelete(item.oid)
    deleteRow()
  }
  multipleSelection.value = []
  delDialogVisible.value = false
}

const filterState = (value, row) => {
  return row.ostate === value
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/AdminPhone/phoneAdminOrders';
</style>
